<template>
  <div class="left">
    <card class="card">
      <template #title>武汉各区今日出行人口统计</template>
      <template #content>
        <ColumnChart :data="people_data"
         v-bind="people_config" 
         class="chart">
      </ColumnChart>
      </template>
      </card>
      <card>
        <template #title>武汉各区实时公交在线表</template>
        <template #content>
          <RoseChart :data="bus_data" v-bind="bus_config"
          class="chart">
          </RoseChart>
        </template>
      </card>
    </div>
    <div class="right">
      <card>
        <template #title>武汉三镇人口统计</template>
        <template #content>
          <PieChart v-bind="city_config" class="chart"></PieChart>
        </template>
      </card>
      <card>
        <template #title>武汉三甲医院</template>
        <template #content>
          <div class="icons">
            <div class="item" 
            v-for="(item, index) in hospitalArr" 
            :key="item.title"
            >
              <div class="title">{{ item.title }}</div>
                <div class="icon">
                  <img 
                  :src="item.url" 
                  alt=”” 
                  :width="index==1 ?20 :30" 
                  :height="index == 1 ? 20 : 30" />
                </div>
            </div>
          </div>
        </template>
      </card>
    <card>
      <template #title>武汉高校学生统计</template>
      <template #content>
        <div class="icons">
          <div class="item" 
          v-for="(item, index) in schoolArr"
          :key="item.title">
            <div class="title">{{ item.title }}</div>
            <div class="icon">
              <img :src="item.url" alt="" width=" 30" height=" 30" />
            </div>
          </div>
        </div>
      </template>
    </card>
  </div>
</template>
<script setup>
import { ColumnChart, RoseChart, PieChart } from "@opd/g2plot-vue"
import card from "../components/card.vue"
import {useLeftTop}from"../data/people"
import {useLeftBottom} from"../data/bus"
import {useRightTop}from "../data/cityPeople";

const { people_data, people_config } = useLeftTop()
const {bus_data, bus_config} = useLeftBottom()
const { city_config } = useRightTop()

const hospitalArr = [
  { title: "医院30家", url: "/src/assets/icons/医院.png" },
  { title: "门诊300个人", url: "/src/assets/icons/门诊.png" },
  { title: "病床3000张", url: "/src/assets/icons/病床.png" },
]
const schoolArr = [
  { title: "高校130家", url: "/src/assets/icons/学校.png" },
  { title: "在线大学生100万", url: "/src/assets/icons/学生.png" }
]
</script>
<style scoped>
.left {
  position: absolute;
  left: 20px;
  top: 40px;
}
.chart {
  width: 310px;
  height: 200px;
}
.card {
  margin-top: 40px;
}
.right {
  position: absolute;
  left: calc(100vw - 370px);
  top: 40px;
}
.icons {
  display: flex;
  justify-content: space-around;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center,
}
.icon {
  height: 30px;
  margin-top: 10px;
}
</style>
        